<template>
    <div>
        <div v-if="paidShow" class="paid">
            <div class="search">
                <img class="logoimg" src="../../assets/logos.jpg" alt="">
                <p class="logotit">AATWallet</p>
            </div>
            <van-tabbar v-model="active" :fixed="false" @change="tabChange" active-color="#CBAF89">
                <van-tabbar-item icon="search">
                    <span>{{$t('home.function_button_one')}}</span>
                    <img slot="icon" slot-scope="props" src="../../assets/charges.png">
                </van-tabbar-item>
                <van-tabbar-item icon="search">
                    <span>{{$t('home.function_button_two')}}</span>
                    <img slot="icon" slot-scope="props" src="../../assets/operations.png">
                </van-tabbar-item>
                <van-tabbar-item icon="search">
                    <span>{{$t('home.function_button_three')}}</span>
                    <img slot="icon" slot-scope="props" src="../../assets/withdraws.png">
                </van-tabbar-item>
                <van-tabbar-item icon="search">
                    <span>{{$t('home.function_button_four')}}</span>
                    <img slot="icon" slot-scope="props" src="../../assets/records.png">
                </van-tabbar-item>
            </van-tabbar>
            <div class="nav">
                <div v-for="(val,key) in price">
                    <h5 v-if="key == 'AAT'">AAT /<b>USDT</b></h5>
                    <h5 v-else>{{key}} /<b>USDT</b></h5>
                    <p><span v-if="key&&key == 'AAT'">{{Number(val).toFixed(4)}}</span>
                    <span v-if="key&&key != 'AAT'">{{Number(val).toFixed(4)}}</span>
                </p>
                </div>
            </div>
             <div class="banner">
                <van-swipe style="margin-top: 5px">
                    <van-swipe-item v-for="item in bannerList" :key="item.id">
                        <img :src="item.web+item.img" alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>
           <!-- <div class="bgimg">
                <div class="posbg"></div>
                <p>坦克计划</p>
                <span>在节点中寻找新的生机</span>
            </div>-->
            <div class="account">
                <p>{{$t('home.total_capital')}}</p>
                <van-row type="flex" align="bottom">
                    <van-col span="3" offset="3">≈</van-col>
                    <van-col span="6" offset="3">{{Number(myassets + balanceassets).toFixed(2)}}</van-col>
                    <van-col span="3" offset="6">USDT</van-col>
                </van-row>
            </div>
            <div class="coins">
                <van-cell title-class="title" value-class="value" v-for="(item,index) in coinList" :key="index" @click="showPopup(index)">
                    <template slot="title" >
                        <img :src="item.web+item.img" alt="">
                        <span class="custom-text">{{item.unit}}</span>
                    </template>
                    <template>
<!--                          <b style="color :#f6543e" v-if="blance.mycoin!=undefined">{{blance.mycoin[item.unit].blance}} {{item.unit}}</b>-->
                        <b>{{(Number(item.balance) + Number(blance.mycoin[item.unit].blance)).toFixed(2)}} {{item.unit}}</b>
                         <span v-if="blance.mycoin!=undefined">≈ {{(Number(item.usdt) + Number(blance.mycoin[item.unit].usdt)).toFixed(2)}} USDT</span>
                    </template>
                    <template>
                        <van-icon name="arrow" />
                    </template>
                </van-cell>
            </div>
        </div>
        <van-popup v-model="maskshow" closeable close-icon="close" position="bottom"  :style="{ height: '23%' }">
            <div v-for="(item,index) in nowcoinList" >
           <div class="coinlist" style="color :#2bc49b" ><span class="floatM">冷钱包</span>{{Math.floor(blance.mycoin[item.unit].blance*10000)/10000}}<span class="rightcoin">{{item.unit}}</span></div>
            <div class="coinlist" style="color :#f6543e"><span class="floatM">本钱包</span>{{(Number(item.balance)).toFixed(2)}} <span class="rightcoin">{{item.unit}}</span></div>
            <div class="coinlist"  v-if="item.unit == 'AAT'"><span class="floatM">锁仓包</span> {{(Number(aat_lock)).toFixed(2)}}  <span class="rightcoin">{{item.unit}}</span></div>
            <div class="coinlist" ><span class="floatM">总资产</span>≈ {{(Number(item.usdt) + Number(blance.mycoin[item.unit].usdt)).toFixed(2)}}  <span class="rightcoin">USDT</span></div>
            </div>
        </van-popup>
        <div v-if="!paidShow">
            <router-view @_return="_return" @disappear="disappear"/>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                paidShow:false,
                active:null,
                banner:require('../../assets/banner.png'),
                coins:[require('../../assets/btc.png'),require('../../assets/eth.png'),require('../../assets/oec.png'),require('../../assets/usdt.png')],
                coinList:[],
                bannerList:[],
                price:{},
                myassets:'',
                blance:'',
                maskshow: false,
                nowcoinList:[],
                balanceassets:'',
                aat_lock:0.00
            }
        },
        methods: {
            _return(){
                console.log(11);
                this.$router.push('/home/paid')
                this.paidShow = true
                this.$emit('tabDisappear',true)
                this.$emit('changeIndex',0)
                this.active = null
                this.getData()
            },
            showPopup(index) {
                var coinList=this.coinList
                var nowcoinList=[]

                this.nowcoinList=nowcoinList.concat(coinList[index])
                this.maskshow = true;
                this.index=index
            },
            tabChange(data){
                switch (data) {
                    case 0:
                        this.paidShow = false
                        this.$emit('tabDisappear',false)
                        this.$router.push('/home/paid/charge')
                        break;
                    case 1:
                        this.paidShow = false
                        this.$emit('tabDisappear',false)
                        this.$router.push('/home/paid/assets')
                        break;
                    case 2:
                        this.paidShow = false
                        this.$emit('tabDisappear',false)
                        this.$router.push({name:'cash',params:{coin:this.coinList,lqb:this.myassets}})
                        break;
                    case 3:
                        this.paidShow = false
                        this.$emit('tabDisappear',false)
                        this.$router.push('/home/paid/deals')
                        break;
                }
            },
            disappear(){
                this.$emit('tabDisappear',false)
            },
            getData(){

                this.$api.get('index/getblance')
                    .then(res =>{
                        this.blance = res.detail
                        console.log(this.blance)
                        // var all=Number(res.detail.mycoin["AAT"].blance)+Number(res.detail.mycoin["BTC"].blance)+Number(res.detail.mycoin["ETH"].blance)+Number(res.detail.mycoin["USDT"].blance)
                        // console.log(all)
                        // all=all.toFixed(2)
                        this.balanceassets=res.detail.myassets
                    })
                this.$api.post('index/index')
                    .then(res =>{
                        console.log(res.detail)
                        this.bannerList = res.detail.carouselList
                        this.coinList = res.detail.coin
                        this.price = res.detail.price
                        this.myassets = res.detail.myassets
                        this.aat_lock = res.detail.aat_lock
                        console.log(this.aat_lock);
                        console.log(1111);
                    })
            }
        },
        created() {
            if(this.$route.path === '/home/paid'){
                this.$emit('changeIndex',0)
                this.paidShow = true
                this.$emit('tabDisappear',true)
            }
            if(this.$route.path === '/home'){
                this.$emit('changeIndex',0)
                this.paidShow = true
            }
            this.getData()
        },
        mounted() {

        },
    }
</script>

<style lang="stylus" scoped>
    font =#CBAF89
    fonts=#2bc49b
    org=#f6543e
    [class*=van-hairline]::after
        border none
    .rightcoin
        float right 
        margin-right 80px
        text-align left
    .floatM
        margin-right 30px
        color #999
        float left
        margin-left 70px
        margin-right 0px
    .coinlist
        text-align center
        line-height 30px
        font-size 16px
    .coinlist:first-child
        margin-top 25px
    .coinlist:last-child
        box-sizing border-box
        // padding-left 100px
    .textmargin
        margin-right 30px
    .logoimg
        width 30px
        display inline
        height 30px
    .logotit
        display inline
        line-height 30px
        margin-left 10px
        color #1a1a1a
    .search
        text-align center
        display flex
        justify-content center
    .van-cell:not(:last-child)::after
        border none
    .paid
        width 100%
        margin 0 auto
        .search
            font-size 18px
            text-align center
            padding:10px 0
            color #D8D8D8
        .van-tabbar
            background: linear-gradient(180deg, #54d8b4, #26c196) !important;
            box-shadow:0px 6px 10px 0px rgba(0,0,0,0.2);
            background 5px
            padding 40px 0
            .van-tabbar-item
                color #fff
                img
                    width 40px
                    height 40px
                    margin-bottom 5px
        .nav
            margin-top 10px
            display flex
            display -webkit-flex
            justify-content space-between
            border-bottom 10px solid #ececec;
            div
                padding 10px
                width 26%
                display inline-block
                border-left 1px solid #ebebeb
                h5
                    color #2d2d2d
                    font-size 14px
                    text-align center
                    b
                        font-size 10px
                p
                    color #707070
                    margin-top 5px
                    text-align center
                    padding-bottom 5px
                    span
                        font-size 20px
                        color fonts
        .banner
            img
                width 100%
                height 100%
        .account
            border-radius:5px;
            padding 10px 10px
            margin-top 15px
            border-bottom 1px solid #ececec
            width 94%
            margin 0 auto
            box-sizing border-box
            p
                color #2c2c2b
                margin-top 0px
                font-weight bold
            .van-row
                align-items baseline
                .van-col
                    text-align center
                .van-col--6
                    font-size 24px
                    color fonts
                .van-col--3
                    color #2c2c2b
                    font-size 12px
                    font-weight bold

        .coins
            margin-top 5px
            .van-cell
                padding 15px
                border-radius 5px
                width 94%
                box-sizing border-box
                margin 0 auto
                border-bottom 1px solid #ececec
                .title
                    display flex
                    display -webkit-flex
                    align-items center
                    img
                        width 40px
                    span
                        margin-left 12px
                        font-size 20px
                .value
                    color fonts
                    padding-top 10px
                    b
                        display block
                        font-size 14px
                    span
                        font-size 12px
                        color #2d2d2d
                        font-weight bold
                        margin-top 20px
                    i
                        font-size 16px
                        display block
                        float right 
                        margin-top 5px
                        margin-left 10px
                        color #333
        .bgimg
            background  url('../../assets/new5.jpg')
            width 100%
            height 130px
            background-repeat no-repeat
            background-size cover
            overflow hidden
            position relative
            .posbg
                width 100%
                height 130px
                background rgba(0,0,0,0.5)
                position absolute
                z-index 2
            p
                margin 30px 0 0 30px
                font-size 20px
                color #23ba92
                z-index 13
                position relative
            span
                color #FFFFFF
                background rgba(255,255,255,.3)
                border-radius 25px
                padding 4px 10px
                margin 5px 0 0 25px
                display inline-block
                z-index 13
                position relative

</style>
